<template>
  <div>
    <header>
      <h1>登录</h1> 
    </header>
    <div class="login-button">
      <img src="https://s10.mogucdn.com/mlcdn/c45406/170831_3ffghafjcj6ljbbhl6949aheldkd7_94x76.png" alt="" class="button-img">
      微信登录
      </div>
    <div class="content">
      <div class="content-other">其他登录方式</div>
      <div class="list">
        <div>
          <img src="https://s10.mogucdn.com/mlcdn/c45406/170831_68b918b6ikh668e8gibeg48bk82l3_90x90.png" alt="" width="44px">
          <p>qq登录</p>
        </div>
        <div>
          <img src="https://s10.mogucdn.com/mlcdn/c45406/170831_1078gd17460490lak5g7edbhah17i_90x90.png" alt="" width="44px">
          <p>免密登录</p>
        </div>
        <div>
          <img src="https://s10.mogucdn.com/mlcdn/c45406/170831_136567k82ideakd452d8db8ca27ak_90x90.png" alt="" width="44px">
          <p>账号登录</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // beforeEnter(){
  //   this.$route.path('/login')
  // }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/reset.css'

header
  width 100%
  text-align center
  h1
    font-weight 300
    padding 60px
    font-size 0.26rem
.login-button
  margin 0 auto
  width 80%
  height 50px
  line-height 50px
  border-radius 24px
  background-color #09BB07
  color #fff
  font-weight 500
  text-align center
  .button-img
    width 15px

.content
  margin 50px 10px 0
  text-align center
  &::before
    content: "";
    display: block;
    width: .4rem;
    border-top: 1px solid #bbb;
    margin: 0 auto;
  .content-other
    margin 28px auto
    margin-bottom 48px
    color #999
  .list
    display flex
    justify-content space-around
    p
      margin-top 10px
      font-size 12px
</style>